<template>
	<view>

		<view class="listbox">
			<view v-for="(item,index) in arrlist" class="listview">
				<view class="list-time">{{item.create_time}}</view>
				<view class="listitem">
					<view class="listtitle">{{item.title}}</view>
					<view class="listtext">{{item.info}}</view>
					<view class="flex ac" style="margin-top: 20rpx;">
						<view style="color:#1D1F2E;font-size: 28rpx;flex: 1;">立即查看</view>
						<image style="width: 50rpx;" mode="widthFix" src="../../static/icon/right1.png"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 上拉加载数据 -->
		<view class="loadmore">
			<view v-if="load" class="loading-more">
				<view class="more-bottom-line" style="display: flex;">
					<view class="more-loading"></view>
					<text class="more-lineTxt">正在加载...</text>
				</view>
			</view>
			<view v-if="nomore==false" class="more-finish">
				<view class="more-bottom-line">
					<view class="more-line"></view>
					<text class="more-lineTxt">暂无更多了~</text>
					<view class="more-line"></view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 -->
		<view v-if="nodata==true" class="nodatabox">
			<image style="width:279rpx;" mode="widthFix" src="../../static/currently.png">
			</image>
			<view class="nodatatext">暂无消息</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				typevalue: '',
				arrlist: [],
				pageIndex: 1,
				load: true,
				nomore: true,
				nodata: false,
				hasMore: false,
			}
		},

		onLoad(e) {
			this.typevalue = e.type
			this.readMessagedata()
			this.readMaa()
		},

		// 上拉触底事件
		onReachBottom: function() {
			var that = this
			if (that.hasMore) {
				that.readMessagedata() //调用函数
			}
		},

		methods: {
			async readMaa(e) {
				let apply = await request(`${getApp().globalData.http}readMessage`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					cls: this.typevalue,
				})
			},

			async readMessagedata() {
				let apply = await request(`${getApp().globalData.http}listMessage`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					page_num: 1,
					page_size: 12,
					cls: this.typevalue,
				})
				if (apply.data.code == 0) {
					this.arrlist = this.arrlist.concat(apply.data.data)
					// 上拉加载数据
					if (apply.data.page_num == apply.data.total_num) {
						this.hasMore = false
					} else {
						this.hasMore = true
					}
					if (apply.data.data.length == 0) {
						this.nomore = true
						this.nodata = true
					}
					if (apply.data.data.length !== 0) {
						this.nomore = true
						this.nodata = false
					}
					if (this.hasMore) {
						this.pageIndex = this.pageIndex + 1
					} else {
						this.load = false
						if (apply.data.data.length == 0) {
							this.nomore = true
						} else {
							this.nomore = false
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding: 20rpx;
		background-color: #f7f7f8;
	}

	.list-time {
		text-align: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #BBBBBB;
	}

	.listview {
		margin-bottom: 50rpx;
	}

	.listitem {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.listtitle {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #161723;
	}

	.listtext {
		font-size: 28rpx;
		color: #161723;
		border-bottom: 1rpx solid #DFDFDF;
		padding-bottom: 30rpx;
	}

	// 暂无数据
	.nodatabox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 188rpx;
	}

	.nodatatext {
		font-size: 28rpx;
		color: #909090;
		margin: 20rpx 0;
	}
	
</style>